<template>
    <section class="calendar-contain" v-loading="loading">
        <FullCalendar
            id="calendar"
            ref="calendarRef"
            :options="calendarOptions"
        >
        </FullCalendar>
    </section>
</template>

<script>
import lunar from '@src/modules/calendar/lunar';

import '@fullcalendar/core/vdom'; 
import FullCalendar from '@fullcalendar/vue';
import dayGridPlugin from '@fullcalendar/daygrid';
import * as HomeApi from "@src/api/HomeApi";

import tippy from 'tippy.js';
import 'tippy.js/dist/tippy.css';

import { rangeOfMonth, formatDate } from 'pub-bbx-utils'
import { fmt_date } from '@src/filter/fmt'
import { getThemeColor } from '@src/util/business/color'

let currentDay = new Date().getDate();
let currentMonth = new Date().getMonth() + 1;
let currentYear = new Date().getFullYear();
import i18n from '@src/locales';
const shbLocale = i18n.locale
export default {
    name: 'tabPaneSchedule',

    components: {
        FullCalendar
    },

    data(){
        return {
            loading:false,

            calendarApi:null,
            isToday:true,

            calendarData:[],

            calendarOptions:{
                // 引入的插件
                plugins: [dayGridPlugin ],

                initialView: 'dayGridMonth',
                // 切换语言，当前为中文
                locale: shbLocale, // TODO 国际化 日历语言
                // 修改日程背景色
                eventColor: getThemeColor(), 

                // events: 'https://fullcalendar.io/api/demo-feeds/events.json',
                events: [
                    
                ],

                dayMaxEvents: true,
                eventDidMount: this.eventDidMount,

               eventTimeFormat: {
                  // like '14:30'
                  hour: '2-digit',
                  minute: '2-digit',
                  meridiem: false,
                  hour12: false, // 设置时间为24小时
                },
                // 鼠标移上去事件
                eventMouseEnter: this.handleEventMouse,
                // 头部按钮布局展示设置
                headerToolbar: {
                  left: 'todayCustom title prevMonthCustom,nextMonthCustom',
                  center: '',
                  right: ''
                },
                // 自定义按钮
                customButtons: {
                  todayCustom: {
                    text: i18n.t('common.base.today'),
                    click: this.todayCustomClick
                  },
                  
                  prevMonthCustom: {
                    text: '<',
                    click: this.prevMonthCustomClick
                  },
                  nextMonthCustom: {
                    text: '>',
                    click: this.nextMonthCustomClick
                  },
                },

                // 设置日历单元格宽度与高度的比例
                aspectRatio: 1, 
                stickyHeaderDates:true,
                slotEventOverlap: false, // 相同时间段的多个日程视觉上是否允许重叠，默认true允许
                
                views: {
                    dayGridMonth: {
                        // 转农历
                        dayCellContent(item) {
                            let date = new Date(item.date).toLocaleDateString().split('/');
                            const {
                                festival,
                                lunarFestival,
                                Term,
                                IDayCn,
                            } = lunar.solar2lunar(date[0], date[1], date[2]);
                            const f = festival || lunarFestival || Term || IDayCn;

                            let htmlStr1 = '<span style="padding: 4px;color: #595959;">';
                            let htmlStr2 = '<span style="padding: 4px;font-size: 12px;color: #8c8c8c;">';

                            if(currentYear == date[0] && currentMonth == date[1] && currentDay == date[2]) {
                              htmlStr1 = '<span class="current-month-day">';
                              htmlStr2 = '<span style="padding: 4px;font-size: 12px;">';
                            }

                            let htmlStr = `${htmlStr1}${date[2]}</span>`
                            if( shbLocale === 'zh') {
                              htmlStr = `${htmlStr}${htmlStr2}${f}</span>`
                            }
                            return {
                              html: htmlStr,
                            };
                            },
                        },
                    },
            }
        }
    },

    props:{
        user:{
            type:Object,
            required:true
        },
        userId:[String,Number]
    },

    mounted(){
      this.calendarApi = this.$refs.calendarRef.getApi()
      this.initCalendar();
    },

    methods:{
        initCalendar() {
            let params = {
              users:[this.userId]
            }

            let currentDate = this.calendarApi.currentData.currentDate
            let timeArr = rangeOfMonth(currentDate)
            
            params.startTime = +dayTimeStart(timeArr[0])
            params.endTime = +dayTimeEnd(timeArr[1])

            this.loading = true;
            HomeApi.getCalendar(params).then((res) => {
                this.loading = false;
                
                const { data = [], status } = res;

                if(status) return;

                if(!data || !data.length) return;

                let events = [];

                data.map(item => {
                    events.push(this.genEvent(item));
                })
                this.$set(this.calendarOptions,'events',events);
                this.calendarData = events
                
            }).catch(e=>{
                this.loading = false;
            })
        },

        // 根据类型获取事件
        genEvent(event) {
            let { agendaId, objId, name, daySpanStartTime, daySpanEndTime,startTime, endTime,type, head, daySpan, id, cancel, status} = event;
            let tempObj = {
                agendaId:agendaId,
                id: agendaId,
                objId: objId,
                title: name,
                start: daySpan ? daySpanStartTime : formatDate(startTime),
                end: daySpan ? daySpanEndTime : formatDate(endTime),
                startTime,
                endTime,
                type,
                head,
                allDay: daySpan,
                currentId: id,
            };

            const typeObj = { 1: 'event', 2: 'task', 3: 'common' };

            // 取消和拒绝状态
            let cancelStyle = cancel == 1 || status == 2 ? 'event-cancle' : '';

            let isAllDayStyle = daySpan && (cancel == 1 || status == 2)
                ? 'event-cls-through'
                : '';

            tempObj.classNames = [
                'event-cls',
                `event-cls-${typeObj[event.type]}`,
                cancelStyle,
                isAllDayStyle,
            ];
            return tempObj;
        },

        todayCustomClick(){
          this.calendarApi.today();
          this.initCalendar()
        },

        prevMonthCustomClick(){
          this.calendarApi.prev();
          this.initCalendar()
        },


        nextMonthCustomClick(){
          this.calendarApi.next();
          this.initCalendar()
        },

        getIsToday() {
          return (
            DateUtil.format(calendarApi.getDate(), 'yyyy-MM-dd') == DateUtil.format(new Date(), 'yyyy-MM-dd')
          );
        },

        // 鼠标移上去展示详细信息
        handleEventMouse(info) {
          tippy(info.el, {
            content: info.el.innerText,
            // placement: 'left',
          });
        },

        // 事件被渲染
    eventDidMount(info) {
      this.$nextTick(() => {
          let parentDom = info.el;
          if (parentDom.classList.contains('fc-daygrid-block-event')) {
            let dom = parentDom.getElementsByClassName(
              'fc-event-main-frame'
            )[0];
            let childDom = document.createElement('div');
            childDom.innerHTML = '<div class="fc-daygrid-event-dot"></div><div class="fc-event-time"></div>';
            // 跨天日程加上时间
            if (info.event.allDay) {
              let startTime = '';
              let id = info.event.id;
              
              const item = this.calendarData.filter(x => {
                if (x.agendaId == id) {
                  // 因为跨天日程也可以循环
                  // 如果一天里面有两个跨天(跨天循环的情况)的需要在判断开始时间是否一样才能渲染，不能通过agendaId去唯一判断
                  let segStart = x.start
                  let eventStart = fmt_date(info.event.startStr)
                  if (segStart == eventStart) {
                    return x;
                  }
                }
              });
              if (item && item.length) {
                if (item[0].startTime)
                  startTime = formatDate(
                    new Date(item[0].startTime),
                    'HH:mm'
                  );
                childDom.innerHTML = `<div class="fc-daygrid-event-dot"></div><div class="fc-event-time">${startTime}</div>`;
              }
            }
            childDom.classList.add('fc-dot-pa');
            dom.insertBefore(childDom, dom.childNodes[0]);
          }
      });
    },
    }
}
</script>

<style lang="scss" scoped>
.el-tab-pane{
    height:100%;
    
}
.calendar-contain {
    height:100%;
    overflow-y:auto;
    ::v-deep{
        .fc-theme-standard th{
            border:none;
        }
        .fc-header-toolbar{
            .fc-toolbar-chunk{
                display:flex;
            }
        }
        .fc-button:focus{
            box-shadow: none;
        }
        .fc .fc-button-primary:not(:disabled).fc-button-active:focus, .fc .fc-button-primary:not(:disabled):active:focus {
          box-shadow: none;
        }
        .fc-col-header-cell {
                border: none;
                color: #595959;
                font-weight: 400;
        }
        .fc-daygrid-day-frame{
            background:#fff;
        }

        .current-month-day {
            align-items: center;
            background: $color-primary-light-6;
            border-radius: 50%;
            color: #fff;
            display: flex;
            font-size: 14px;
            height: 24px;
            justify-content: center;
            width: 24px;
        }
        .fc-theme-standard{
            .fc-scrollgrid{
                border:none;
            }
            td {
                border:none;
                border-bottom: 1px solid #eee;
                
            }
            .fc-daygrid-day-top {
                align-items: center;
                flex-direction: row;
                justify-content: center;
            }
        }

        .event-cls-common{
            background: #f6ffed;
        }
        .fc-toolbar-chunk{
            align-items: center;
        }
        .fc-toolbar-title{
            color: #262626;
            font-size:14px;
            font-weight: 400;
            margin:0;
        }
        .fc-todayCustom-button{
            padding: 8px 15px;
            margin:0 16px 0 0;
            font-size: 14px;
            border-radius: 4px;
            background: #fff !important;
            border: 1px solid #e0e1e2 !important;
            box-sizing: border-box;
            color: #606266 !important;
            cursor: pointer;
            display: inline-block;
            font-size: 14px;
            font-weight: 500;
            line-height: 14px;
            outline: none;
            text-align: center;
            transition: .1s;
            -webkit-appearance: none;
            -moz-user-select: none;
            -webkit-user-select: none;
            -ms-user-select: none;
            white-space: nowrap;
        }
        .fc-button-group{
            margin:0;
            .fc-button{
                border:0;
                background:#fff;
                color:#8c8c8c;
                padding:0;
                margin-left:12px;
                -webkit-appearance: none;
                -moz-user-select: none;
                -webkit-user-select: none;
                -ms-user-select: none;
                white-space: nowrap;
                outline: none;
                .fc-icon{
                    width:16px;
                    color:#8c8c8c;
                    font-weight: 100;
                    font-size: 18px;
                    &:hover{
                        color:$color-primary-light-6;
                    }
                }
                
            }
        }




        // 下面是从日历页面拷贝过来的样式
      .fc {
          flex: 1;
      .fc-col-header-cell-cushion {
        display: block;
        font-size: 13px !important;
      }
      .fc-timegrid-col-events {
        z-index: 5;
      }
     
      // 日视图和周视图 时间轴第一个时间点不显示
      .fc-timeGridDay-view,
      .fc-timeGridWeek-view,
      .fc-resourceTimeGridDay-view {
        .fc-timegrid-slots > table > tbody > tr:first-child > td:first-child {
          display: none;
        }
        .event-cls,
        .fc-event-title-container {
          margin: 4px 0 0 4px;
        }
      }
      // 日历顶部
      .fc-col-header-cell {
        // background-color: $color-primary-light-6!important;
        // color: #fff!important;
        font-weight: 400;
        color: #595959;
        border: none;
      }
      // 日历背景
      .fc-daygrid-day-frame {
        background: #fff;
        .banci {
          position: absolute;
          right: 0;
          top: 4px;
        }
      }
      // 当天日历背景
      // .fc-day-today{
      //   .fc-daygrid-day-frame{
      //     background: #b3d8ff;
      //   }
      // }
      // 日视图左边时间
      .fc-timegrid-slot-label {
        vertical-align: top;
        line-height: 0.1em;
        border: none;
      }
      // 去掉日视图的虚线
      .fc-timegrid-slot-minor {
        border-top-style: none;
      }
      // 事件背景
      .fc-timeGridDay-view,
      .fc-dayGridMonth-view,
      .fc-resourceTimeGridDay-view {
        .fc-timegrid-slots {
          background: #fff !important;
        }
      }
      // 时间间隔高度
      .fc-timegrid-slot {
        height: 2em;
        border-left: none;
        border-right: none;
      }
      // 当前时间线
      .fc-timegrid-now-indicator-arrow {
        border-width: 4px !important;
        border-top-color: #ff4d4f;
        border-bottom-color: #ff4d4f;
        width: 8px;
        height: 8px;
        border-radius: 4px;
      }
      .fc-timegrid-now-indicator-arrow {
        margin-top: -4px;
      }
      .fc-timegrid-slot-label-cushio {
        font-size: 12px;
      }
      .event-cls,
      .fc-event-title-container {
        .fc-event-title {
          /*display: flex;
          height: 100%;*/
          align-items: center;
          // min-height: 2em!important;
          font-weight: 400;
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
          color: #595959 !important;
          img {
            width: 24px;
            height: 24px;
            border-radius: 50%;
            margin: 0 2px;
            object-fit: cover;
          }
        }
      }
      .event-cancle {
        // text-decoration: line-through;
        div {
          text-decoration: line-through;
        }
      }
      // 工单日程
      .event-cls-task {
        background: #e6fffb !important;
        &:active {
          color: #fff;
          background: $color-primary-light-6 !important;
        }
        .fc-daygrid-event-dot {
          border: 3px solid $color-primary-light-6 !important;
          border-color: $color-primary-light-6 !important;
          margin: 0 4px 0 2px;
        }
      }
      .event-cls-through {
        text-decoration: line-through;

        .fc-event-title,
        div {
          text-decoration: line-through;
        }
      }
      // 事件日程
      .event-cls-event {
        background: #fffbe6 !important;
        &:active {
          color: #fff !important;
          background: #faad14 !important;
        }
        .fc-daygrid-event-dot {
          border: 3px solid #faae14 !important;
          border-color: #faae14 !important;
          margin: 0 4px 0 2px;
        }
      }
      // 通用日程
      .event-cls-common {
        background: #f6ffed !important;
        &:active {
          color: #fff;
          background: #52c41a !important;
        }
        .fc-daygrid-event-dot {
          border: 3px solid rgb(76, 175, 80) !important;
          border-color: rgb(76, 175, 80) !important;
          margin: 0 4px 0 2px;
        }
      }

      .title-cell-shaded-shadow {
        position: relative;
        &::before {
          content: '';
          width: 100%;
          position: absolute;
          top: 0;
          left: 0;
          border-bottom: 1px solid #e9e9e9;
          box-shadow: 0 3px 6px rgba(0, 0, 0, 0.6);
          z-index: 99;
          opacity: 0.5;
        }
      }

      .fc-scrollgrid-section {
        height: 0;
      }

      // todo 日视图事件宽度不能撑满？
      .fc-day {
        .fc-direction-ltr .fc-timegrid-col-events {
          margin-right: 0;
        }
      }

      // 日视图和周视图
      .fc-timeGridDay-view,
      .fc-timeGridWeek-view,
      .fc-resourceTimeGridDay-view {
        // 事件样式
        .event-cls {
          // background: #fff!important;
          border: none !important;
          &:hover {
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12),
              0 0 6px rgba(0, 0, 0, 0.04);
          }
          .fc-event-main {
            min-height: 1em;
            color: #595959 !important;
            .fc-event-time {
              // 去掉事件的时间显示
              display: none !important;
            }
          }
        }
        .event-cls-task::before {
          content: '';
          position: absolute;
          top: 1px;
          left: -3px;
          width: 4px;
          height: 100%;
          border-radius: 2px;
          background: $color-primary-light-6 !important;
        }
        .event-cls-event::before {
          content: '';
          position: absolute;
          top: 1px;
          left: -3px;
          width: 4px;
          height: 100%;
          border-radius: 2px;
          background: #faae14 !important;
        }
        .event-cls-common::before {
          content: '';
          position: absolute;
          top: 1px;
          left: -3px;
          width: 4px;
          height: 100%;
          border-radius: 2px;
          background: #4caf50 !important;
        }
      }
      .fc-resourceTimelineDay-view,
      .fc-resourceTimelineWeek-view {
        // 事件样式
        .event-cls {
          // background: #fff!important;
          border: none !important;
          &:hover {
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12),
              0 0 6px rgba(0, 0, 0, 0.04);
          }
          .fc-event-main {
            min-height: 1em;
            color: #595959 !important;
            .fc-event-time {
              // 去掉事件的时间显示
              display: none !important;
            }
            .fc-event-title {
              padding-left: 8px !important;
            }
          }
        }
        .event-cls-task .fc-sticky::before {
          content: '';
          position: absolute;
          top: 0;
          left: 0;
          width: 4px;
          height: 100%;
          border-radius: 2px;
          background: $color-primary-light-6 !important;
        }
        .event-cls-event .fc-sticky::before {
          content: '';
          position: absolute;
          top: 0;
          left: 0;
          width: 4px;
          height: 100%;
          border-radius: 2px;
          background: #faae14 !important;
        }
        .event-cls-common .fc-sticky::before {
          content: '';
          position: absolute;
          top: 0;
          left: 0;
          width: 4px;
          height: 100%;
          border-radius: 2px;
          background: #4caf50 !important;
        }
        // 取消的删除线
        .event-cancle div {
          text-decoration: line-through;
        }
      }
      // 月视图
      .fc-dayGridMonth-view {
        .event-cls {
          .fc-daygrid-dot-event .fc-event-title {
            font-weight: 400;
            @include text-ellipsis();
          }
        }
      }

      .current-month-day {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 24px;
        height: 24px;
        border-radius: 50%;
        font-size: 14px;
        background: $color-primary-light-6;
        color: #fff;
      }
      .fc-resourceTimelineDay-view {
        .fc-timeline-header
          > table
          > tbody
          > tr:first-child
          > th:first-child
          > div {
          display: none;
        }
      }
      .fc-resourceTimelineWeek-view {
        .fc-slot-today {
          // 当前时间的阴影
          background: #eee;
          border-color: #fff;
          opacity: 0.5;
        }
      }
      .fc-resource-timeline {
        .fc-scrollgrid-section-body table {
          border-bottom-style: none;
        }
        .fc-scrollgrid-liquid {
          border-collapse: collapse;
        }
        .fc-scrollgrid-section-header {
          border-bottom: 1px solid #eeeeee;
          .fc-day-today .fc-timeline-slot-cushion {
            color: $color-primary-light-6;
          }
        }
        .fc-datagrid-cell-cushion {
          padding: 8px 4px 8px 0;
          position: relative;
          overflow: visible;
        }
        .fc-timeline-events {
          padding-bottom: 0;
        }
        .fc-timeline-more-link {
          background: none;
          div:first-child {
            width: 20px;
            left: 0;
            right: 0;
            position: sticky;
          }
          .fc-timeline-more-link-inner {
            display: none;
          }
        }
        .team-people-resourse {
          display: flex;
          margin-right: 4px;
          .team-people-name {
            flex-grow: 1;
            margin-right: 4px;
            display: flex;
            .team-people-head {
              width: 24px;
              height: 24px;
              border-radius: 50%;
              margin-right: 4px;
              object-fit: cover;
            }
            span {
              width: 65px;
              height: 20px;
              font-size: 12px;
              font-family: PingFangSC-Regular, PingFang SC;
              font-weight: 400;
              color: #595959;
              line-height: 20px;
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap;
              display: inline-block;
            }
          }
          .team-people-icon {
            display: none;
          }
          .el-tooltip__popper.is-dark.none {
            display: none;
            transform-origin: center bottom;
            z-index: 2019;
            position: absolute;
            top: -32px;
          }
          .zhiding {
            .el-tooltip__popper.is-dark.none {
              left: 45px;
              .popper__arrow {
                left: 27px;
              }
            }
            &:hover {
              .el-tooltip__popper.is-dark.none {
                display: block;
              }
            }
          }
          .shanchu {
            .el-tooltip__popper.is-dark.none {
              left: 57px;
              .popper__arrow {
                left: 29px;
              }
            }
            &:hover {
              .el-tooltip__popper.is-dark.none {
                display: block;
              }
            }
          }
          .fanzhuan.shanchu {
            .el-tooltip__popper.is-dark.none {
              left: 57px;
              top: 32px;
              .popper__arrow {
                left: 27px;
                top: -6px;
                transform: rotate(180deg);
                -ms-transform: rotate(180deg); /* Internet Explorer */
                -moz-transform: rotate(180deg); /* Firefox */
                -webkit-transform: rotate(180deg); /* Safari 和 Chrome */
                -o-transform: rotate(180deg); /* Opera */
              }
            }
          }
          i {
            font-size: 14px;
            color: #000000;
          }
          i:hover {
            cursor: pointer;
          }
          .team-top-inner-triangle {
            top: 0;
            border-left: 10px solid transparent;
            border-right: 10px solid #bae7ff;
            border-bottom: 10px solid transparent;
            height: 0;
            width: 0;
            position: absolute;
            right: 0;
            z-index: 2;
          }
        }
        .team-people-resourse:hover {
          span {
            width: 40px;
          }
          .team-people-icon {
            flex-grow: 0;
            display: block;
          }
        }
      }
    }
    }
}
</style>

<style lang="scss">
.base-tooltip-agenda {
  background: #fff !important;
  color: #333;
  padding: 6px 0;
  .base-tooltip-content {
    padding: 5px 30px;
    // border-bottom: 1px solid #eee;
    line-height: 27px;
    font-size: 15px;
    &:hover,
    &:active {
      background: $color-primary-light-1;
      color: $color-primary-light-6;
      cursor: pointer;
    }
  }
}

.fc-timeGridDay-view {
  .fc-timegrid-now-indicator-arrow {
    left: unset;
    right: 0 !important;
  }
  .fc-timegrid-now-indicator-line {
    z-index: 5;
  }
  // 日视图不显示星期几
  .fc-col-header-cell {
    display: none;
  }
}
.fc-timeGridWeek-view {
  .fc-timegrid-now-indicator-arrow {
    display: none;
  }
  .fc-scrollgrid-section-body .fc-day-today {
    background: rgba(238, 238, 238, 0.5);
    border-color: rgba(255, 255, 255, 0.5);
    // opacity: 0.5;
  }
  .fc-timegrid-now-indicator-line {
    border-style: none;
    z-index: 5;
    .fc-timegrid-now-indicator-arrow-main {
      position: absolute;
      z-index: 4;
      left: 0;
      border-width: 4px !important;
      border-top-color: #ff4d4f;
      border-bottom-color: #ff4d4f;
      background: red;
      margin-top: -4px;
      width: 8px;
      height: 8px;
      border-radius: 4px;
    }
    .fc-timegrid-now-indicator-line-main {
      position: absolute;
      z-index: 4;
      left: 0;
      right: 0;
      border-style: solid;
      border-color: red;
      border-color: red;
      border-width: 1px 0 0;
    }
  }
}
.fc .fc-timegrid-slot-label-cushion {
  font-size: 12px;
  color: #8c8c8c;
}
.fc .fc-resourceTimelineDay-view .fc-timeline-slot-cushion {
  font-size: 12px;
  color: #8c8c8c;
  font-weight: 400;
}
.fc .fc-resourceTimelineWeek-view .fc-timeline-slot-cushion {
  font-size: 14px;
  font-weight: 400;
}
.fc-theme-standard .fc-scrollgrid {
  border: none !important;
}
.fc-theme-standard th {
  border: none;
}
.fc-col-header {
  // border-bottom: 1px solid #eee;
  box-shadow: 0px 12px 10px -5px rgba(0, 0, 0, 0.05);
}
.fc-theme-standard td {
  border: 1px solid #eee;
  border-left: none;
  border-right: none;
}
.fc .fc-daygrid-day-top {
  align-items: center;
  justify-content: center;
  flex-direction: row;
}
.fc-event-title {
  @include text-ellipsis;
}
.fc .fc-event-title-container .fc-event-title {
  padding-left: 4px;
}
.fc-daygrid-block-event .fc-event-time {
  font-weight: 400;
}
.fc-h-event .fc-event-main {
  color: #595959 !important;
}
.fc-timegrid-event-harness {
  min-height: 2em;
}
.fc .fc-scroller-liquid-absolute {
  bottom: 4em;
}
.fc-h-event {
  border: none;
}
// 点击更多popover
.fc .fc-popover {
  top: 25% !important;
  left: 35% !important;
}
.fc .fc-popover-body {
  max-height: 300px;
  overflow: auto;
  .fc-more-popover-misc {
    height: 30px;
    font-size: 18px;
  }
  .fc-daygrid-event-harness a {
    height: 24px;
    line-height: 24px;
  }
  .fc-event-title {
    width: 300px;
  }
}
.fc .fc-more-popover .fc-popover-header {
  background: #fafafa;
}
// 周视图下面添加阴影
.fc .fc-scroller-harness {
  // box-shadow: 0px 12px 10px -5px rgba(0, 0, 0, 0.05);
}

.fc .fc-day-today .fc-popover-body {
  .fc-more-popover-misc {
    display: flex;
    font-size: 12px;
    color: #8c8c8c;
  }
}

.fc .fc-timeGridWeek-view .fc-scrollgrid-section-header {
  .fc-col-header-cell.fc-day-today {
    color: $color-primary-light-6;
  }
}

.create-agenda-menu {
  margin-top: 5px;
  .el-dropdown-menu__item {
    &:hover,
    &:active {
      background: $color-primary-light-1;
      color: $color-primary-light-6;
    }
  }
  .popper__arrow {
    display: none;
  }
}

.fc .fc-timegrid-event.fc-event-mirror {
  opacity: 0.7;
}

.fc .fc-daygrid-bg-harness .fc-highlight {
  background: $color-primary-light-6;
  opacity: 0.7;
  z-index: 10;
}

.create-agenda-menu {
  .el-dropdown-menu__item:focus,
  .el-dropdown-menu__item:not(.is-disabled):hover {
    color: $color-primary-light-6;
  }
}

.fc-scrollgrid-sync-table {
  // min-height: 450px;
}
.fc-resourceTimeGridDay-view {
  .fc-timegrid-now-indicator-arrow {
    left: unset;
    right: 0 !important;
  }
}
.fc-resourceTimelineWeek-view,
.fc-resourceTimelineDay-view {
  .fc-timeline-now-indicator-arrow {
    top: unset;
    bottom: 0 !important;
    position: absolute;
    z-index: 4;
    left: 0;
    border-width: 4px !important;
    border-top-color: #ff4d4f;
    border-bottom-color: #ff4d4f;
    background: red;
    margin-left: -5px;
    width: 8px;
    height: 8px;
    border-radius: 4px;
  }
  .fc-scroller-harness-liquid table {
    border-right: 1px solid #e8e8e8;
  }
  .fc-resource-timeline-divider {
    width: 0;
  }
}
.fc-dot-pa {
  display: flex;
  align-items: center;
  margin-left: 2px;
}
.el-dialog__body {
  padding: 20px 20px 30px;
}
.planningTimePop {
  .pop_main {
    line-height: 24px;
    > div:nth-child(1) {
      margin-bottom: 20px;
    }
    > div:nth-child(2) {
      margin-bottom: 15px;
    }
    a {
      color: $color-primary;
      text-decoration: underline;
    }
    p {
      margin: 0;
    }
    i {
      font-style: normal;
      color: $color-warning;
    }
  }
}
.checkbox-group-box {
  position: relative;
  .checkbox-type-txt {
    > div {
      position: absolute;
      left: 76px;
      font-size: 12px;
      color: $color-warning;
      a {
        color: $color-warning;
        text-decoration: underline;
      }
    }
    > div:nth-child(1) {
      top: 33px;
    }
    > div:nth-child(2) {
      top: 65px;
    }
  }
}
.fc-license-message {
  display: none;
}

.fc .fc-daygrid-body-natural .fc-daygrid-day-events {
  margin-bottom: 0;
}
</style>